<%-- 
    Document   : purchase
    Created on : Apr 16, 2013, 4:47:45 AM
    Author     : lohris
--%>

<%@page import="entity.bean.Seat"%>
<%@page import="entity.bean.Show"%>
<%@page import="entity.bean.Movie"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".seat").click(function(){
                    var $markedSeats = $(".marked");
                    var markedSeatString = "";
                    if( $markedSeats.size() < 10)
                    {
                        
                        $(this).toggleClass("marked");
                        $markedSeats = $(".marked")
                        for(var i = 0;i < $markedSeats.size() ;i++)
                        {
                            markedSeatString +=($markedSeats.eq(i).attr("id") + ":");
                        }
                        $("#markedSeat").attr("value",markedSeatString);
                        $("#seatCount").attr("value",$markedSeats.size());
                    }else if( $markedSeats.size() == 10)
                    {
                        if($(this).attr("class") == "seat marked")
                        {
                            $(this).toggleClass("marked");
                            for(var i = 0;i < $markedSeats.size() ;i++)
                            {
                                markedSeatString += $markedSeats.eq(i).attr("id");
                            }
                            $("#markedSeat").attr("value",markedSeatString);
                            $("#seatCount").attr("value",$markedSeats.size());
                        }else{
                            alert("The Maximun Seat marked is reached.");
                        }
                    }

                });
            });
            
            function resetMarked()
            {
                var $markedSeats = $(".marked");
                for(var i = 0;i < $markedSeats.size() ;i++)
                {
                    $markedSeats.eq(i).toggleClass("marked");
                }
                $("#markedSeat").attr("value","");
                $("#seatCount").attr("value",0);
            }
            
        </script>
        <style>
            #screen
            {
                background-color:red;
            }

            .marked
            {
                background-color:green;
            }
            .unavailable
            {
                background-color:black;
            }
            .occupied
            {
                background-color:yellow; 
            }


        </style>


        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Movie title with date</title>
    </head>
    <body>

        <%
            Integer noOfCols = (Integer) session.getAttribute("noOfCols");
            Integer noOfRows = (Integer) session.getAttribute("noOfRows");
            Seat[][] seatingPlan = (Seat[][]) session.getAttribute("seatingPlan");
            Movie selectedMovie = (Movie) session.getAttribute("selectedMovie");
            Show selectedTimeSection = (Show) session.getAttribute("selectedTimeSection");
        %>
        <div id="container">
            <div id="header">
                <div class="noncontent" id="logo">
                    <span>
                        <img src="image/logo.jpg" width="200" height="200" alt="logo"/>
                    </span>
                </div>

                <div class="noncontent" id="title">
                    <h1>Cult Cinema</h1>
                </div>
            </div>

            <div id="body">
                <div id="Menu">
                    <a href="index.jsp">Home</a>
                    <a href="Index">Movies</a>
                    <a href="member.jsp">Member</a>
                    <a href="administrator.jsp">administrator</a>
                </div>
                <div id="content">
                    <div id="seatingPlan">
                        <form action="Purchase" method="POST">
                            <input id="markedSeat" type="hidden" name="markedSeat" value="" readonly="readonly" />
                            <input id="seatCount" type="hidden" name="seatCount" value="" readonly="readonly" />
                            <table border="1">
                                <caption><%=selectedMovie.getName()%>, <%=selectedTimeSection.getTimeString()%></caption>
                                <%for (int i = noOfRows; i > 0; i--) {%>
                                <tr>
                                    <td><%=(char) (i + 64)%></td>
                                    <%for (int j = noOfCols; j > 0; j--) {%>

                                    <td 
                                        <%if (seatingPlan[i - 1][j - 1].getUnavailability()) {%>
                                        class="unavailable"
                                        <%} else if (seatingPlan[i - 1][j - 1].getOccupancy()) {%>
                                        class="occupied"
                                        <%} else {%>
                                        class="seat"
                                        <%}%>
                                        id="<%=((char) (i + 64) + (j + ""))%>">
                                        <%if (seatingPlan[i - 1][j - 1].getUnavailability()) {%>X<%} else if (seatingPlan[i - 1][j - 1].getOccupancy()) {%>X<%} else {%><%=j%><%}%></td>
                                        <%}%>
                                </tr>
                                <%}%>
                                <tr><td id="screen" colspan="<%=noOfCols + 1%>">Screen</td></tr>
                            </table>
                            <input type="submit" value="nextPage" /><input type="reset" value="reset"onclick="resetMarked()" />
                        </form>
                    </div>
                </div>
            </div>

            <div class="noncontent" id="footer">
                <span>
                    <a href="" >Privacy Policy</a>
                    <a href="" >Terms Conditions</a>
                    <a href="" >About Us</a> 
                    <a href="" >Contact Us</a>
                </span>
                <br/>
                <span id="designer">Designed by - Chris Ng, Lusinda Leung<br/></span>
                <span id="copyright">
                    This web site exists to fulfill the coursework requirement of CS4280. Do not use your real	personal data as input.
                </span>
            </div>
        </div>
    </body>
</body>
</html>
